<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <!--有默认值，但是你们都插了 不显示默认值了-->
  <Wind>
    <button>按钮</button>
  </Wind>
  <Wind>
    我没任何标签
  </Wind>
  <Wind>
    <h4>我有多个标签1</h4>
    <h5>我有多个标签2</h5>
    <h6>我有多个标签3</h6>
  </Wind>
  <!--有默认值你不插，显示默认值-->
  <Wind></Wind>

  <!--使用具名插槽-->
  <Wind><span slot="myslot">替换具名插槽</span></Wind>
</div>
<template id="cpn">
  <div>
    <h3>我是组件</h3>
    <!--如果没定义这个插槽，不会加载到页面-->
    <!--定义具名插槽-->
    <slot name="myslot"><button>我是插槽的默认按钮</button></slot>
  </div>
</template>
<script>
  Vue.component("Wind", {
    template: "#cpn"
  });
  const vm = new Vue({
    el: "#app"
  })
</script>
</body>
</html>